<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      right-icon
    />
    <van-grid :column-num="4">
      <van-grid-item
        v-for="value in fitmentlist"
        :key="value.infoId"
        :text="value.infoText"
        :icon="value.infoImg"
        to="/home/fitmentlist"
      />
    </van-grid>
    <div class="fitment">
      <div class="fitment-item">
        <div
          class="img-box"
          v-for="item in fitmentlist"
          :key="item.infoId"
        >
          <img
            :src="item.infoImg"
            alt=""
          />
          <h4 class="title">{{ item.infoTitle }}</h4>
          <div class="square">
            <span>{{ item.infoBrief }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="fitment">
      <div class="fitment-item">
        <div
          class="img-box"
          v-for="item in fitmentlist"
          :key="item.infoId"
        >
          <img
            :src="item.infoImg"
            alt=""
          />
          <h4 class="title">{{ item.infoTitle }}</h4>
          <div class="square">
            <span>{{ item.infoBrief }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFitmentInfo } from '@/api/fitment';
export default {
  data() {
    return {
      fitmentlist: [],
      value: [],
      active: 0,
    };
  },
  created() {
    this.getFitmentInfo();
  },
  methods: {
    async getFitmentInfo() {
      const res = await getFitmentInfo();
      this.fitmentlist = res.data;
    },
  },
};
</script>

<style lang="scss">
.van-nav-bar__content {
  background-color: #eaeaea;
}
.van-nav-bar {
  .van-icon {
    color: #000;
  }
}
.van-search {
  .van-search__content {
    border: 1px solid #000;
  }
  .van-icon-search {
    left: 355px;
  }
}
.van-grid {
}
.van-icon__image {
  border-radius: 4px;
  .van-icon__image img {
    width: 300px;
    height: 200px;
  }
}

.fitment {
  margin-top: 5px;
  width: 100%;
  .fitment-item {
    width: 433px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;

    .img-box {
      width: 189px;
      height: 200px;
      background: rgba(255, 255, 255, 100);
      margin-top: 20px;
      box-shadow: 2px 2px 6px 0px rgba(202, 199, 199, 40);
      /* border: 2px solid rgba(187, 187, 187, 100); */
      margin: 10px 10px;

      img {
        margin-left: 29px;
        margin-top: 12px;
        width: 130px;
        height: 87px;
      }
      .title {
        width: 140px;
        height: 20px;
        font-size: 12px;
        color: #101010;
        font-family: PingFangSC-regular;
        margin-left: 25px;
      }
      .square {
        text-indent: 12px;
        width: 145px;
        font-size: 12px;
        color: #101010;
        font-family: PingFangSC-regular;
        margin-left: 18px;
      }
    }
  }
}
</style>
